import { _decorator, Node, Label } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { Sprite } from 'cc';
import { ReactiveNumber } from '../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { Colors, isClaw } from '../../game/basic';
import { MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { gm } from '../../../../scripts/managers/GameManager';
import { color } from 'cc';
import { UIOpacity } from 'cc';
import { SpriteFrame } from 'cc';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('EditorArrow')
@executeInEditMode
export class EditorArrow extends BaseView {

    posId = ReactiveProperty.Create<number>(null);

    arrowId = ReactiveProperty.Create<number>(null);

    @property([SpriteFrame])
    frames: SpriteFrame[] = [];

    @property(Label)
    infoLabel: Label = null;

    @property(Node)
    rotNode: Node = null;

    @property(Sprite)
    mainSprite: Sprite = null;

    layer = ReactiveProperty.Create<number>(0);

    prev = ReactiveProperty.Create<number>(null);

    ice = ReactiveProperty.Create<number>(0);

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property({ slide: true, range: [0, 15, 1] })
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    @property(ReactiveNumber)
    _direction: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property({ slide: true, range: [0, 3, 1] })
    get direction(): number { return this._direction.value }
    set direction(v: number) { this._direction.Value = v; }

    mirrorEditorArrow = ReactiveProperty.Create<EditorArrow>(null);

    @property(Node)
    snowflakeNode: Node = null;

    @property(Sprite)
    clawSprite: Sprite = null;

    useObserves() {
        return [
            MergeASAP(this.posId, this.arrowId, this._colorId, this._direction, this.mirrorEditorArrow, this.ice).subscribe(this.refresh.bind(this)),
            gm.editAltPressed.subscribe(_ => this.infoLabel.node.active = gm.editAltPressed.value),
            this.layer.subscribe(this.layerChanged.bind(this)),
        ];
    }

    refresh() {
        let infoText = `#${this.arrowId.value}\nC${this.colorId}`;
        this.infoLabel.string = infoText;

        if (this.ice.value) {
            this.snowflakeNode.active = true;
        } else {
            this.snowflakeNode.active = false;
        }
        this.mainSprite.color = Colors[this.colorId];

        this.clawSprite.node.active = isClaw(this.colorId);

        this.rotNode.setRotationFromEuler(0, 0, 90 * this.direction);

        if (this.mirrorEditorArrow.value != null) {
            this.mirrorEditorArrow.value.colorId = this.colorId;
            this.mirrorEditorArrow.value.layer.value = this.layer.value;
            this.mirrorEditorArrow.value.direction = (this.direction + 2) % 4; // 取反向
            this.mainSprite.spriteFrame = this.frames[0];
        } else {
            this.mainSprite.spriteFrame = this.frames[1];
        }

    }

    layerChanged() {
        let scale = Math.pow(.90, this.layer.value);
        this.node.setScale(scale, scale, scale);

        if (this.mirrorEditorArrow.value != null) {
            this.mirrorEditorArrow.value.layer.value = this.layer.value;
        }

    }
}

